import React from 'react';
import { Link } from 'react-router-dom';
import { observer, inject } from 'mobx-react';

import { TopHeader } from '../../components';

import '../CourseListPage/index.scss'
import './index.scss'
import service from '@src/service';


@inject('courseListStore')
@inject('chapterListStore')
@inject('baseStore')
@inject("BeiTieStore")
@observer
class CourseListPage extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			activeIndex: -1,
			searchResultList: [],
			ChaoDaiList: [{
				ItemId: '',
				ItemName: '全部'
			}],
			ShuTiList: [{
				ItemId: '',
				ItemName: '全部'
			}],
			ShuJiaList: [{
				ItemId: '',
				ItemName: '全部'
			}],
			searchForm: {
				ShuTi: '',
				ShuJia: '',
				ChaoDai: '',
				NameOrShuJia: ''
			},
			selectedName: {
				ShuTi: '',
				ShuJia: '',
				ChaoDai: '',
			}
		};

		// 为了在回调中使用 `this`，这个绑定是必不可少的
		this.handleClick = this.handleClick.bind(this);
	}


	pageChangeNoticeToServer = () => {
		var data = {
			header: this.props.baseStore.socketData.header,
			body: {
				type: "page_change",
				content: "/entry_03"
			}
		};
		//给服务端发送 sendMsg事件名的消息
		this.props.baseStore.socketData.socket.emit("teach_app_to_server", data);
	}

	componentDidMount() {

		this.pageChangeNoticeToServer();
		this.props.baseStore.socketData.currentReactView = this;


		var that = this;

		this.props.baseStore.topHeader.title = "碑贴赏习";
		this.props.baseStore.topHeader.show = true;
		this.props.baseStore.topHeader.backTo = '/entry';

		this.props.BeiTieStore.GetPublishList();
		this.props.BeiTieStore.GetGradeListById();

		service.GetChaoDaiList().then(res => {
			that.setState({
				ChaoDaiList: that.state.ChaoDaiList.concat(res)
			});
		})

		service.GetShuTiList().then(res => {
			console.log(res, "===========GetShuTiList========");
			console.log(res.length, "===========list.length========");
			that.setState({
				ShuTiList: that.state.ShuTiList.concat(res)
			});
		})

		service.GetShuJiaList().then(res => {
			console.log(res, "===========GetShuJiaList========");
			console.log(res.length, "===========list.length========");
			that.setState({
				ShuJiaList: that.state.ShuJiaList.concat(res)
			});
		})


		this.Search();


	}

	componentWillUnmount = () => {
		this.setState = (state, callback) => {
			return;
		};
	}

	handleClick = (item, key) => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'handleClick',
				param: [item, key]
			}
		});

		console.log(item, '==========handleClick.item==========');
		console.log(key, '==========handleClick.key==========');

		this.state.searchForm[key] = item.ItemValue;
		this.state.selectedName[key] = item.ItemName;

		this.setState({
			searchForm: this.state.searchForm,
			selectedName: this.state.selectedName
		});

		this.Search(false);

	}

	toShowPage = (item) => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'toShowPage',
				param: [item]
			}
		});

		this.props.baseStore.topHeader.backTo = '/entry_03/';

		var directoryId = item.DirectoryID;
		this.props.history.push('/showBeiTie/' + directoryId);
	}


	Search = (needSocket) => {

		if (needSocket == undefined) {
			needSocket = true;
		}

		needSocket && this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'Search',
				param: []
			}
		});

		var that = this;
		//searchResultList
		service.SearchBeitieList(this.state.searchForm).then(res => {
			console.log(res, "===========GetShuJiaList========");
			console.log(res.length, "===========list.length========");
			that.setState({
				searchResultList: res
			});
		})

	}

	handleEnterKey = (e) => {
		if (e.nativeEvent.keyCode === 13) { //e.nativeEvent获取原生的事件对像
			this.Search()
		}
	}

	onSearchInputChange = () => {
		var value = event.target.value;
		this.onSearchInputChangeForSocket(value)
	}

	onSearchInputChangeForSocket = (value) => {
		this.state.searchForm.NameOrShuJia = value
		this.setState({ searchForm: this.state.searchForm });

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'onSearchInputChangeForSocket',
				param: [value]
			}
		});
	}

	clearSearchFrom = () => {

		this.props.baseStore.socketData.doEmit("teach_app_to_server", {
			type: "do_action",
			content: {
				action: 'clearSearchFrom',
				param: []
			}
		});

		this.setState({
			searchForm: {
				NameOrShuJia: '',
				ShuTi: '',
				ShuJia: '',
				ChaoDai: '',
			},
			selectedName: {
				ShuTi: '',
				ShuJia: '',
				ChaoDai: '',
			}
		});

		this.Search();
	}

	render() {

		var sideBodyContainerCls = "side_body_container"
		if (this.props.courseListStore.pulishList.length > 10) {
			sideBodyContainerCls += " has_scroll_bar";
		}

		var mainContainerCls = "main_container"
		if (this.state.searchResultList.length > 8) {
			mainContainerCls += " has_scroll_bar";
		}


		console.log(this.state.ShuTiList, "=======this.state.ShuTiList=========");

		return (
			<div className="Entry03Page side_main_layout page_container animated fadeInDown  fast">
				<div className="side_wrap">
					<div className="side_header">正在练习</div>
					<div className="side_body">

						<div className={sideBodyContainerCls}>
							<div className='category_item'>
								<div onClick={this.clearSearchFrom}>全部</div>
							</div>
							<div className='category_item'>
								<div className="category_item_line">
									<div className="category_item_name">书体</div>
									<span>{this.state.selectedName.ShuTi.replace('全部', '')}</span>
								</div>
								<ul>
									{
										this.state.ShuTiList && this.state.ShuTiList.map((item) => {
											return (
												<li onClick={() => { this.handleClick(item, 'ShuTi') }}>{item.ItemName}</li>
											)
										})
									}
								</ul>
							</div>
							<div className='category_item'>
								<div className="category_item_line">
									<div className="category_item_name">书家</div>
									<span>{this.state.selectedName.ShuJia.replace('全部', '')}</span>
								</div>
								<ul>
									{
										this.state.ShuJiaList && this.state.ShuJiaList.map((item) => {
											return (
												<li onClick={() => { this.handleClick(item, 'ShuJia') }}>{item.ItemName}</li>
											)
										})
									}


								</ul>
							</div>
							<div className='category_item'>
								<div className="category_item_line">
									<div className="category_item_name">朝代</div>
									<span>{this.state.selectedName.ChaoDai.replace('全部', '')}</span>
								</div>
								<ul>
									{
										this.state.ChaoDaiList && this.state.ChaoDaiList.map((item) => {
											return (
												<li onClick={() => { this.handleClick(item, 'ChaoDai') }}>{item.ItemName}</li>
											)
										})
									}
								</ul>
							</div>
						</div>


					</div>
				</div>
				<div className="main_wrap">
					<div className="one_input_line">
						<input className="input_container" onKeyPress={this.handleEnterKey} value={this.state.searchForm.NameOrShuJia} onChange={this.onSearchInputChange} placeholder="书体或书家" />

						<div className="search_btn_container" onClick={this.Search}>搜索一下</div>
					</div>
					<div className={mainContainerCls}>

						{
							this.state.searchResultList && this.state.searchResultList.map((item, index) => {
								return (
									// img_scale
									<div className="book_each " key={index} onClick={() => this.toShowPage(item)}>


										{
											(item.ImageURL != null && item.ImageURL.length > 0) ? <img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" /> : <React.Fragment>
												<div className="book_each_name">
													{
														item.DirectoryName.split('').map((char, index) => {
															return <div>{char}</div>
														})
													}
												</div>

												<div className="book_each_chaodai">
													{
														item.DynastyName.split('').map((char, index) => {
															return <div>{char}</div>
														})
													}
												</div>

												<div className="book_each_author">
													{
														item.CalligrapherName.split('').map((char, index) => {
															return <div>{char}</div>
														})
													}
												</div>

												<div className="book_each_shuti">
													{
														item.TypefaceName.split('').map((char, index) => {
															return <div>{char}</div>
														})
													}
												</div>
											</React.Fragment>
										}









										{/* <img src={this.props.baseStore.picPreUrl + item.ImageURL} alt="" /> */}
										{/* <img src={this.props.baseStore.GetFinalImageUrl(item.ImageURL)} alt="" /> */}
										{/* <img src={require('../../../pic/bt/face.jpg')} alt="" /> */}
									</div>
								)
							})
						}


					</div>


				</div>

				{/* <div onClick={this.handleClick} className="entry_each"></div> */}


			</div>
		);
	}
}

export default CourseListPage;